import React ,{ Component ,useContext, useState, useEffect, useRef}from 'react';
import { Table, Input, Button, Popconfirm, Form } from 'antd';
import './EditableTable.css'
import {connect} from 'react-redux';
import {setOriginData} from '../../../../redux/actions'
class EditableTable extends Component {
  
    // componentWillReceiveProps(nextProps){
    //   this.handleAdd();
    // }

    constructor(props) {
      super(props);
      this.props.docData.data_set&&this.props.docData.data_set.map((item,index)=>{
        item['key']=index+1;
      })
      const originData=this.props.docData.data_set;
      const header=this.props.docData.header;
      // console.log(originData)
      this.state = {  
        dataSource:  originData,
        count: originData.length,
      };
      
      const Pnumber=Object.getOwnPropertyNames(originData[0]).length-2;
      const strArr=Object.keys(originData[0]);
      this.columns =[] ;
      for(let i=0;i<Pnumber;i++){
        this.columns.push({
          title:header[i],
          dataIndex:strArr[i].toString(),
          editable: true,
          width:150
        })

      }
      
      // this.columns.push( {
      //   title: 'operation',
      //   dataIndex: 'operation',
      //   render: (text, record) =>
      //     this.state.dataSource.length >= 1 ? (
      //       <Popconfirm title="确定要删除吗?" onConfirm={() => this.handleDelete(record.key)}>
      //         <a>删除</a>
      //       </Popconfirm>
      //     ) : null,
      // },)
      }
    // handleDelete = (key) => {
    //   const dataSource = [...this.state.dataSource];
    //   this.setState({
    //     dataSource: dataSource.filter((item) => item.key !== key),
    //   });
    //   this.props.setOriginData(this.state.dataSource,this.props.docData.header)
    // };
    // handleAdd = () => {
    //   const { count, dataSource } = this.state;
    //   const newData = {
    //     key: count,
    //     name: ``,
    //     age: ``,
    //     address: ``,
    //   };
    //   this.setState({
    //     dataSource: [...dataSource, newData],
    //     count: count + 1,
    //   });
    // };
    handleSave = (row) => {
      const newData = [...this.state.dataSource];
      const index = newData.findIndex((item) => row.key === item.key);
      const item = newData[index];
      newData.splice(index, 1, { ...item, ...row });
      this.setState({
        dataSource: newData,
      });
      this.props.setOriginData(this.state.dataSource,this.props.docData.header)
    };
  
    render() {
  const EditableContext = React.createContext();
  const EditableRow = ({ index, ...props }) => {
  const [form] = Form.useForm();
  return (
    <Form form={form} component={false}>
      <EditableContext.Provider value={form}>
        <tr {...props} />
      </EditableContext.Provider>
    </Form>
  );
};

const EditableCell = ({
  title,
  editable,
  children,
  dataIndex,
  record,
  handleSave,
  ...restProps
}) => {
  const [editing, setEditing] = useState(false);
  const inputRef = useRef();
  const form = useContext(EditableContext);
  useEffect(() => {
    if (editing) {
      inputRef.current.focus();
    }
  }, [editing]);

  const toggleEdit = () => {
    setEditing(!editing);
    form.setFieldsValue({
      [dataIndex]: record[dataIndex],
    });
  };

  const save = async (e) => {
    try {
      const values = await form.validateFields();
      toggleEdit();
      handleSave({ ...record, ...values });

    } catch (errInfo) {
      console.log('保存:', errInfo);
    }
  };

  let childNode = children;

  if (editable) {
    childNode = editing ? (
      <Form.Item
        style={{
          margin: 0,
        }}
        name={dataIndex}
      >
        <Input ref={inputRef} onPressEnter={save} onBlur={save}  />
      </Form.Item>
    ) : (
      <div
        className="editable-cell-value-wrap"
        style={{
          paddingRight: 24,
        }}
        onClick={toggleEdit}
      >
        {children}
      </div>
    );
  }

  return <td {...restProps}>{childNode}</td>;
};
     //
      const { dataSource } = this.state;
      // console.log(dataSource);
      const components = {
        body: {
          row: EditableRow,
          cell: EditableCell,
        },
      };
      const columns = this.columns.map((col) => {
          if (!col.editable) {
           return col;
          }
    
        return {
          ...col,
          onCell: (record) => ({
            record,
            editable: col.editable,
            dataIndex: col.dataIndex,
            title: col.title,
            handleSave: this.handleSave,
          }),
        };
      });
      return (
        <div >
          <Table
            components={components}
            rowClassName={() => 'editable-row'}
            dataSource={dataSource}
            columns={columns}
            pagination={true}
            size='small'
            scroll={{x:1500}}
          />
        </div>
      );
    }
    
  }
  
  export default connect(
    state => ({docData: state.docData}),
    {setOriginData}
  )(EditableTable);
  